<template>
	<view>
		<!-- 导航 -->
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @click-right="openAddInput">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class="mx-1" @click="changeTab(index)"
				v-for="(item,index) in tabBars" :key="index"
				:class="tabIndex === index ? 'font-lg text-main' : 'font-md text-light-muted'">
					{{item.name}}
				</view>
			</view>
			<text slot="right" class="iconfont icon-fatie_icon"></text>
		</uni-nav-bar>
		
		<swiper 
		:current="tabIndex" 
		:duration="150" 
		:style="'height:'+scrollH+'px;'"
		@change="onChangeTab">
			
				<!-- 关注 -->
				<swiper-item>
					<block v-if="list.length>0">
						<scroll-view 
						scroll-y="true" 
						:style="'height:'+scrollH+'px;'"
						@scrolltolower="loadmoreEvent()">
							<block v-for="(item,index) in list" :key="index">
								<common-list @doSupport="doSupport" @Follow="Follow" :item="item" :index="index"></common-list>
								<divider></divider>
							</block>
							<load-more :loadmore="loadmore"></load-more>
						</scroll-view>
					</block>
					<block v-else>
						<no-thing></no-thing>
					</block>
				</swiper-item>
			
			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
					<!-- 热门分类 -->
					<hot-cate :hotCate="hotCate"></hot-cate>
					<!-- 搜索框 -->
					<view class="p-2" @click="openSearch()">
						<view class="bg-light rounded flex align-center justify-center text-secondary">
							<text class="iconfont icon-sousuo mr-2"></text>搜索话题
						</view>
					</view>
					<swiper 
					class="px-2 pb-2" 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000" 
					:duration="1000" 
					:circular="true">
						<swiper-item>
							<image src="/static/demo/banner3.jpg" 
							style="height: 300rpx;" 
							class="w-100 rounded"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/demo/banner2.jpg"
							style="height: 300rpx;" 
							class="w-100 rounded"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/demo/banner1.jpg"
							style="height: 300rpx;" 
							class="w-100 rounded"></image>
						</swiper-item>
					</swiper>
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">最近更新</view>
					<!-- 话题列表组件 -->
					<block v-for="(item,index) in topicList" :key="index">
						<topic-list :item="item",:index="index"></topic-list>
					</block>
					
				</scroll-view>
			</swiper-item>
		</swiper>
		
		
	</view>
</template>

<script>
	
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import commonList from '@/components/common/common-list.vue';
	import LoadMore from '@/components/common/load-more';
	import hotCate from '@/components/news/hot-cate';
	import NoThing from '@/components/common/no-thing';
	import TopicList from '@/components/news/topic-list';
	import {getSocialFollow} from "@/network/home.js";
	import {getTopic} from "@/network/topic.js";
	export default {
		components: {
			uniNavBar,
			commonList,
			LoadMore,
			hotCate,
			TopicList,
			NoThing
		},
		data() {
			return {
				scrollH:500,
				tabIndex:0,
				tabBars:[{
					name:"关注"
				},{
					name:"话题"
				}],
				// 关注列表
				list:[],
				max_id:null,
				loadmore:"上拉加载更多",
				hotCate:[],
				topicList:[]
			}
		},
		onUnload() {
			uni.$off("updateFollowOrSupport",(e)=>{})
			uni.$off('Logout',(e=>{}))
		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
				}
			});
			this.getTopicFollow();
			// 监听关注和顶踩
			uni.$on("updateFollowOrSupport",(e)=>{
				switch (e.type){
					case "follow":
					this.Follow(e.data.user_id)
						break;
					case "support":
					this.doSupport(e.data.news_list)
						break;
					case "comment":
					this.doComment(e.data.comment)
						break;	
				}
			})
			uni.$on("Logout",()=>{
				this.getTopicFollow()
			})
			
			
		},
		methods: {
			// 打开发布页
			openAddInput(){
				this.checkAuth(()=>{
					uni.navigateTo({
						url: '../add-input/add-input?tabBars='+JSON.stringify(this.topicList),
					});
				})
			},
			getTopicFollow(){
				// 测试数据
				getSocialFollow().then(attr=>{
					let[err,res] = attr
					let data = res.data
					this.max_id = data.results ? data.results.slice(-1)[0].id : null
					this.list = data.results ?? []
					this.loadmore = data.loadmore
				})
				getTopic().then(attr=>{
					let [err,res] = attr
					this.hotCate = res.data.tabBars
					this.topicList = res.data.list
				})
			},
			// 切换选项卡
			changeTab(index){
				this.tabIndex = index
			},
			// 监听滑动
			onChangeTab(e){
				this.changeTab(e.detail.current)
			},
			// 关注功能
			Follow(user_id){
				this.list.forEach(item=>{
					if(item.user==user_id){
						item.isFollow = !item.isFollow
					}
					return
				})
			},
			// 评论
			doComment(e){
				this.list.forEach(item=>{
					if(item.id==e.id){
						item.comment_count = e.count
					}
					return
				})
			},
			// 顶踩功能
			doSupport(news_list){
					let types = news_list.type
					let msg = types==="support" ? "点赞" : "点踩"
					this.list.forEach(item=>{
						if(item.id==news_list.id){
							// 如果已点过则进行取消操作
							if(item.news_list.type===types){
								item.news_list[types+"_count"]--
								item.news_list.type=""
								uni.showToast({title:"取消成功"})
								return
							}
							// 如果没点过取消，且没选中任何功能，则执行
							if(item.news_list.type){
								let my_type = item.news_list.type
								item.news_list[my_type+"_count"]--
							}
							// 如果什么都没选执行
							item.news_list.type=types
							item.news_list[types+"_count"]++
							uni.showToast({title:msg+"成功"})
						}
						return
					})
			},
			// 上拉加载更多
			loadmoreEvent(){
				let item = this.loadmore
				if(item !=="上拉加载更多") return
				// 修改列表状态
				this.loadmore = '加载中...'
				// 模拟数据请求
				setTimeout(()=>{
					let mid = this.max_id
					getSocialFollow(mid).then(res=>{
						let [err,data_list] = res
						if(err){
							uni.showToast({title:"请求失败"})
						}else{
							let data = data_list.data
							this.max_id =data.results.slice(-1)[0]?.id
							this.list = [...this.list,...data.results]
							this.loadmore = data.loadmore
						}
					})
				},2000)
			},
			openSearch(){
				uni.navigateTo({
					url:'/pages/search/search?type=topic'
				})
			}
		}
	}
</script>

<style>

</style>
